<template>
  <div
    class="home"
    ref="listContainer"
    @scroll="srollFn"
  >
    <div
      class="header"
      v-exposure="{show: showFn, data: {data: 'exposure test'} }"
    >
      <input
        type="button"
        @click="clickBtn"
        value="点我"
      >
    </div>
    <div ref="itemList">
      <div
        class="box-item"
        v-for="
      (item, index) in list"
        :key="index"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
import { ListExposureDurationHander } from "../common/bury/exposureReportUtil";
export default {
  name: "home",
  data() {
    return {
      listItemShowDurationController: null,
      list: [
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
      ],
    };
  },
  created() {
    this.$event.setPage("pageid001", "首页setPage埋点测试", {});
  },
  mounted() {
    // 初始化计时曝光：
    console.log(this.$refs.itemList);
    console.log(this.$refs.listContainer);
    this.listItemShowDurationController = new ListExposureDurationHander(
      this.$refs.itemList,
      this.$refs.listContainer,
      {
        eventId: "batchid001",
        eventDesc: "首页计时曝光埋点测试",
        hander: (...rest) => this.$event.batchElementExposure(...rest),
      }
    );
    this.listItemShowDurationController.addExposeListData(
      this.list.map((item, index) => {
        return {
          position: index + 1,
          desc: "计时曝光test",
        };
      })
    );
    this.$nextTick(() => {
      this.listItemShowDurationController.checkListItemShowStatus();
    });
  },
  beforeDestroy() {
    this.reportHideAll();
  },
  methods: {
    clickBtn() {
      this.$event.report("reportid001", "首页report埋点测试", {});
    },
    showFn(data) {
      this.$event.exposure("exposureid001", "首页exposure埋点测试", {
        data: data.data,
      });
    },
    srollFn() {
      console.log("scroll ==================================>");
      this.checkLiveListShow();
    },
    reportHideAll() {
      if (this.listItemShowDurationController) {
        this.listItemShowDurationController.markElementShowTimeInfo();
        this.listItemShowDurationController.restoreShowIndex();
      }
    },
    checkLiveListShow() {
      if (
        this.listItemShowDurationController &&
        this.listItemShowDurationController.checkListItemShowStatus
      ) {
        this.listItemShowDurationController.checkListItemShowStatus();
      }
    },
  },
};
</script>

<style>
.home {
  height: 100%;
  overflow: scroll;
}

.header {
  height: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

input {
  height: 0.4rem;
  width: 0.8rem;
}

.box-item {
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border: 1.5px solid blueviolet;
}
</style>